<!-- 优惠券核销页面 -->
<template>
	<view class="couponspin">
		<image :src="coupon_img_1" mode="scaleToFill"></image>
		<p>{{name}}</p>
		<view class="dh" @tap="seeLocation">
			<p class="n-a">使用商户：{{company_name}}</p>
			<image src="../../../static/images/xiaofeiji.png" mode="aspectFit"></image>
		</view>
		<view class="e-img">
			<image :src="qr" mode="aspectFit"></image>
		</view>
		<p class="s-ewm">扫一扫二维码核销</p>
	</view>
</template>

<script>
	import Qr from "../../../utils/wxqrcode.js"
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟客户端',
				    path: '/pages/index/index' // 分享的页面路径
				},
				user_coupon_id:'',	
				name:'',
				company_name:'',
				coupon_img_1:'',
				coupon_code:'',//生成二维码的coupon_code
				qr:'',
				latitude: '',
				longitude: '',
				address:''
			}
		},
		onLoad(e) {
			this.user_coupon_id = e.user_coupon_id
			this.getCouponsInfo()
		},
		methods: {
			async getCouponsInfo(){//获取卡券详细信息
				const res = await this.$myRequest({
					url:'/api/coupons/getCouponsInfo?user_coupon_id='+this.user_coupon_id
				}).then((res) => {
					// console.log(res.data.data)
					this.name = res.data.data.name
					this.company_name = res.data.data.company_name
					this.coupon_img_1 = res.data.data.coupon_img_1
					this.coupon_code = res.data.data.coupon_code
					this.getQr()
					this.address = res.data.data.address
					this.latitude = parseFloat(res.data.data.lat)
					this.longitude = parseFloat(res.data.data.lng) 
				})
			},
			getQr(){//生成二维码
				this.qr = Qr.createQrCodeImg(this.coupon_code)
			},
			seeLocation(){//使用手机内置导航
			var _this = this
				uni.openLocation({
					latitude: _this.latitude,
					longitude: _this.longitude,
					address:_this.address,
					name:_this.company_name
				})
			},
		},
	}
</script>

<style lang="scss">
	.couponspin{
		padding: 24rpx 32rpx 0 32rpx;
		text-align: center;
		image{
			width: 100%;
			height: 252rpx;
		}
		p{
			font-size: 40rpx;
			font-weight: bold;
			color: #3C3C3C;
			margin-top: 24rpx;
		}
		.dh{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 6rpx;
			.n-a{
				margin: 0;
				padding: 0;
				color: #8B8B8B;
				font-size: 24rpx;
				font-weight: 500;
			}
			image{
				width: 60rpx;
				height: 40rpx;
				line-height: 30rpx;
			}
		}
		.e-img{
			margin: auto;
			margin-top: 142rpx;
			display: flex;
			align-items: center;
			padding: 14rpx;
			width: 272rpx;
			height: 272rpx;
			border-radius: 12rpx;
			background: linear-gradient(#FFEED9,#FFE7CB,#FFDDB9);
		}
		.s-ewm{
			font-size: 24rpx;
			color: #8B8B8B;
			margin-top: 22rpx;
		}
		
		.s-txm{
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #8B8B8B;
			margin-bottom: 204rpx;
		}
	}
</style>
